<template>
    <div class="parts banxin">
        <!-- 面包屑 -->
        <Crumbs :crumbArr="crumbArr" />
        <div class="content tanxin">
            <main class="tanxin">
                <div class="mleft">
                    <div class="bimg">
                        <img width="100%" height="460" :src="'https://sc.wolfcode.cn' + productInfo.coverImg" alt="">
                    </div>
                    <ul class="simg tanxin">
                        <li @click="sClick(index, item.src)" :class="productActive === index ? 'active' : ''"
                            v-for="(item, index) in productInfo.imgAltas" :key="index">
                            <img width="100%" :src="'https://sc.wolfcode.cn' + item.src" alt="" />
                        </li>
                    </ul>
                </div>
                <div class="mright">
                    <h2>{{ productInfo.seriesTitle }}</h2>
                    <p>{{ productInfo.seriesSubTitle }}</p>
                    <section>{{ productInfo.coin }}</section>
                    <div v-for="(item, index) in productInfo.parameterJson" :key="index">
                        <h3>{{ item.title }}</h3>
                        <ul>
                            <li v-for="items in item.parameters" :key="items.id"
                                :class="{ active: items.currentActivate }">{{ items.title }}</li>
                        </ul>
                    </div>
                    <h3>数量</h3>
                    <div class="stepper tanxin">
                        <div class="btn jia" @click="addFn">+</div>
                        <input type="text" value="1" v-model="stepNum" disabled>
                        <div class="btn jian" @click="cutFn">-</div>
                    </div>
                    <div class="btns">
                        <div @click="addToCartFn">加入购物车</div>
                        <div class="buynow">立即购买</div>
                    </div>
                </div>
            </main>
            <div class="aside">
                <h3>您还可以兑换</h3>
                <ul>
                    <li v-for="item in themYouCanBuy" :key="item.id" class="tanxin"
                        @click="$router.push(`/details/${item.id}`)">
                        <img :src="'http://sc.wolfcode.cn' + item.img" alt="" />
                        <section class="tanxin">
                            <div class="title">{{ item.name }}</div>
                            <div class="jifen tanxin">{{ item.coin }}
                                <img src="../assets/images/home/monad.png" alt="" />
                            </div>
                        </section>
                    </li>
                </ul>
            </div>
        </div>
        <ul class="tab tanxin">
            <li :class="{ active: tabActive === 1 }" @click="tabActive = 1">商品详情</li>
            <li :class="{ active: tabActive === 2 }" @click="tabActive = 2">常见问题</li>
        </ul>
        <div v-html="productInfo.description" :style="{ display: tabActive == 1 ? 'block' : 'none' }"></div>
        <div class="issue" :style="{ display: tabActive == 2 ? 'block' : 'none' }">
            <h4>兑换后运费如何收取？</h4>
            <p>
                商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
            </p>
            <p>
                （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
            </p>

            <h4>如何申请退换货？</h4>
            <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
            <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
            <p>
                因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；
            </p>
            <p>
                如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；
            </p>
            <p>
                如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。
            </p>

            <h4>如何开具发票？</h4>
            <p>叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。</p>
            <h4>关于鸡腿价格问题</h4>
            <p>
                因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。
            </p>
            <h4>联系我们</h4>
            <p>www.wolfcode.cn </p>
            <p>微信公众号搜索“叩丁狼”</p>
        </div>
    </div>
</template>

<script>
import Crumbs from '@/components/Crumbs.vue'
import { AddToCartApi, GoodsDetailsApi } from '@/request/api'
export default {
    data() {
        return {
            crumbArr: ["首页", "全部商品", "商品详情"],
            productActive: 0,
            productInfo: {
                coverImg: "",
            },
            stepNum: 1,
            tabActive: 1,
            themYouCanBuy: []
        }
    },
    components: {
        Crumbs
    },
    methods: {
        // 增加数量
        addFn() {
            if (this.stepNum >= this.productInfo, stock) {
                return;
            }
            this.stepNum++
        },
        // 减少数量
        cutFn() {
            if (this.stepNum <= 1) {
                return;
            }
            this.stepNum--;
        },
        sClick(index, src) {
            console.log(index, src);
            this.productActive = index;
            this.productInfo.coverImg = src;
        },
        // 加入购物车
        addToCartFn() { 
            AddToCartApi({
                productId:this.productInfo.id,
                total:this.stepNum,
            }).then((res)=>{
                if(res.data.code === 0){
                    let obj = {content:"已成功添加到购物车",icon:"success"};
                    this.$store.dispatch('AsyncToast',obj);
                }else{
                    let obj = {content:res.data.message,icon:"info"};
                    this.$store.dispatch("AsyncToast",obj)
                }
            });
        },
    },
    created() {
        // console.log(this.$route.params.id);
        let myid = this.$route.params.id;
        GoodsDetailsApi(myid).then((res) => {
            if (res.data.code == 0) {
                let { themYouCanBuy, productInfo
                } = res.data.data;
                this.productInfo = productInfo;
                this.themYouCanBuy = themYouCanBuy;
                this.productInfo.coverImg = productInfo.imgAltas[0].src;
                console.log(this.productInfo);
                this.productInfo.description = productInfo.description.replace(/<img src="/g,
                    '<img src="http://sc.wolfcode.cn/');
            }
        });
    },
    watch: {
        $route: {
            handler(newVal, oldVal) {
                this.$router.go(0);
            },
            deep: true,
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.content {
    min-height: 560px;

    main {
        width: 970px;
        border-right: 3px solid #ccc;
        box-sizing: border-box;
        padding-right: 49px;

        .mleft {
            width: 459px;
            margin-right: 32px;

            .bimg {
                width: 459px;
                height: 460px;
                margin-bottom: 21px;

                img {
                    display: block;
                }
            }

            .simg {
                width: 459px;

                li {
                    width: 100px;
                    height: 100px;
                    box-sizing: border-box;
                    opacity: 0.6;

                    &.active {
                        opacity: 1;
                        border: 2px solid red;
                    }
                }
            }
        }

        .mright {
            flex: 1;

            h2 {
                font-size: 28px;
                color: #000;
            }

            p {
                margin-top: 15px;
                font-size: 14px;
                color: #999;
                line-height: 1.2;
                margin-bottom: 26px;
            }

            section {
                font-size: 28px;
                font-weight: 700;
                color: #fd604d;
                padding-bottom: 23px;
                border-bottom: 1px solid #ccc;
            }

            h3 {
                margin-top: 19px;
                margin-bottom: 14px;
                font-size: 16px;
                color: #000;
                font-weight: 700;
            }

            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    height: 32px;
                    line-height: 32px;
                    color: #666;
                    border: 1px solid #d1d1d1;
                    padding: 0 17px;
                    cursor: pointer;
                    margin-right: 20px;
                    margin-bottom: 11px;

                    &.active {
                        color: @blue;
                        border-color: @blue;
                    }
                }
            }

            .stepper {
                background: #fff;
                width: 105px;

                .btn {
                    width: 30px;
                    height: 32px;
                    line-height: 32px;
                    box-sizing: border-box;
                    color: #ccc;
                    cursor: pointer;
                    border: 1px solid #d1d1d1;
                    text-align: center;
                }

                input {
                    width: 45px;
                    border: 0;
                    box-sizing: border-box;
                    text-align: center;
                    border-top: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                }
            }

            .btns {
                display: flex;
                margin-top: 24px;

                div {
                    width: 150px;
                    height: 46px;
                    line-height: 46px;
                    background: #3dc36b;
                    font-size: 18px;
                    text-align: center;
                    cursor: pointer;
                    margin-right: 19px;
                    color: #fff;

                    &.buynow {
                        background: @orange;
                    }
                }
            }
        }
    }

    .aside {
        flex: 1;
        padding-left: 20px;
        box-sizing: border-box;

        h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        ul {
            li {
                margin-bottom: 30px;
                cursor: pointer;

                img {
                    width: 80px;
                    border: 1px solid transparent;
                }

                section {
                    width: 110px;
                    justify-content: space-around;
                    flex-direction: column;

                    .title {
                        color: #666;
                        font-family: SourceHanSansSC;
                    }

                    .jifen {
                        font-size: 18px;
                        font-weight: 700;
                        color: @orange;
                        justify-content: flex-start;
                        align-items: center;

                        img {
                            width: 30px;
                            margin-left: 20px;
                        }
                    }
                }
            }
        }
    }
}

.tab {
    margin-top: 100px;
    justify-content: flex-start;

    li {
        width: 120px;
        height: 50px;
        line-height: 50px;
        font-weight: 700;
        text-align: center;
        cursor: pointer;

        &.active {
            background: @blue;
            color: #fff;
        }
    }
}

.issue {
    padding-bottom: 20px;

    h4 {
        font-weight: 700;
        margin: 10px 0;
    }

    p {
        line-height: 2;
        &:nth-of-type(10){
            line-height: 0;
            text-decoration: underline;
        }
    }
}
</style>